<template>
	<view>
		<!-- 月度报表 -->
		<view>
			<view class="dateBg">
				<u--form>
					<u-form-item label="月度时间" @click="showMothDate = true">
						<u--input v-model="monthDate" disabled placeholder="请选择月度时间" minDate='100'></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			
			
			<view class="charts-box">
			    <qiun-data-charts type="area" ontouch :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :chartData="chartData1" />
			</view>
			
			<u-overlay :show="showMothDate">
					<date-picker :show="showMothDate" type="range" @confirm="confirmMonthDate" format="yyyy-mm-dd" @cancel="showMothDate =false"></date-picker>
			</u-overlay>
			
			
		</view>
		
		
		
		<!-- 年度报表 -->
		<view>
			<view class="dateBg">
					<u--form>
						<u-form-item label="年度时间" @click="showYearDate = true">
							<u--input v-model="yearDate" disabled placeholder="请选择年度时间"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				
				<view class="charts-box">
				    <qiun-data-charts type="area" ontouch :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :chartData="chartData2"  />
				</view>
				
				<u-overlay :show="showYearDate">
						<date-picker :show="showYearDate" type="range" @confirm="confirmYearDate" format="yyyy-mm-dd" @cancel="showYearDate =false"></date-picker>
				</u-overlay>
				
				
				
			</view>
			
			
		</view>
</template>

<script>
	import datePicker from '../../components/mx-datepicker/mx-datepicker.vue'
	import * as mineApi from '@/common/apis/mine-api.js';
	export default {
			
		components: {
			datePicker
		},
		data() {
			return {
				showMothDate :false,
				monthFirstDate : '',
				monthLastDate : '',
				chartData1:{},
				chartData2:{},
				
				tempChartData1:{
					xAixs : {
						    type:'grid',
						    gridType:'dash',
						    itemCount:4,//x轴单屏显示数据的数量，默认为5个
						    scrollShow:true,//新增是否显示滚动条，默认false
						    scrollAlign:'left',//滚动条初始位置
						    scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						    scrollColor:'#DEE7F7',//默认为 #A6A6A6}
					},
				  categories: [],
				  series: [{
				    name: "月度学习统计报表",
				    data: []
				  }],
					
				},
				
				showYearDate :false,
				yearFirstDate : '',
				yearLastDate : '',
				tempChartData2:{
					xAixs : {
						    type:'grid',
						    gridType:'dash',
						    itemCount:4,//x轴单屏显示数据的数量，默认为5个
						    scrollShow:true,//新增是否显示滚动条，默认false
						    scrollAlign:'left',//滚动条初始位置
						    scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						    scrollColor:'#DEE7F7',//默认为 #A6A6A6}
					},
				  categories: [],
				  series: [{
				    name: "年度学习统计报表",
				    data: []
				  }]
				}
			}
		},
		
	async	onLoad() {
			this.getDefaultDate();
		await	this.getCourseCount(1);
		await	this.getCourseCount(2);
		},
		
		computed: {
			monthDate() {
				return this.monthFirstDate + '至' + this.monthLastDate;
			},
			yearDate() {
				return this.yearFirstDate + '至' + this.yearLastDate;
			}
		},
		
		methods: {
				
			getDefaultDate() {
			 var moment = require('@/util/moment.js');
			 // var moment = require('moment');
			 //获取当前时间所在月的第一天和最后一天
			 this.monthFirstDate = moment().startOf("month").format("YYYY-MM-DD");
			 this.monthLastDate = moment().endOf("month").format("YYYY-MM-DD");
			 //获取当前时间所在年的第一天和最后一天
			 this.yearFirstDate = moment().startOf("year").format("YYYY-MM-DD");
			 this.yearLastDate = moment().endOf("year").format("YYYY-MM-DD");
			},
			//获取统计数据
			getCourseCount(value) {
				mineApi.courseCount({
					type : value,
					startTime : value === 1 ? this.monthFirstDate : this.yearFirstDate,
					endTime : value === 1 ? this.monthLastDate : this.yearLastDate
				}).then(res => {
					 var data = res;
					 if(value === 1) {
						 this.tempChartData1.categories = data.times;
						 var monthSeries = this.tempChartData1.series[0];
						 monthSeries.data = data.durations;
						 
						 this.chartData1 = this.tempChartData1;
					 }
					 
					 if(value === 2) {
					 		this.tempChartData2.categories = data.times;
					 		var monthSeries = this.tempChartData2.series[0];
					 		monthSeries.data = data.durations;
							
							this.chartData2 = this.tempChartData2;
					 }
					 
				})
			},
			
			confirmMonthDate(e) {
				this.showMothDate = false;
				console.log(e);
				var dateList = e.value;
				this.monthFirstDate = dateList[0];
				this.monthLastDate = dateList[1];
				this.getCourseCount(1);
			},
			
			
				
			confirmYearDate(e) {
				this.showYearDate = false;
				console.log(e);
				var dateList = e.value;
				this.yearFirstDate = dateList[0];
				this.yearLastDate = dateList[1];
				this.getCourseCount(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dateBg {
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 0 20upx;
	}
	.charts-box {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
		
	}
	
</style>
